<template>
	<el-table-column v-bind="$attrs" min-width="120" show-overflow-tooltip>
    <template #default="{ row }">
      <div v-if="!isEdit">{{ getUserName(row[prop])  }}</div>
      <el-select-v2 v-model="row[prop]" :options="curOptions" :disabled="!isEdit" :filter-method="filterMethod" filterable
			clearable v-else />
    </template>
    
  </el-table-column>
</template>
<script lang="ts" setup>
// 表格内可编辑的用户选择框，用于表格内的用户选择框，例如：
// <MkColumnInputUser prop="peiXueRen" label="配血者" :isEdit="ctx.isEdit" />
import { filterArrayWithPinYin } from '../forms/shared';
import { SysUserAllOutput } from '/@/api/bas/sysUser';
import { userList, userList4ShuXueKe, getUserName } from '/@/stores/baseInfo';

// 正常的列, 主要是为了统一默认列宽120
defineOptions({
	name: 'MkColumnInputUser',
});
const props = defineProps({
  prop: {
    type: String,
    require: true,
    default: 'id'
  },
  isEdit: {
    type: Boolean,
    default: false
  },
	scope: { // 范围: "ShuXueKe","All"
		type: String,
		default: 'All',
	},
})


// 过滤后的数据源 
const curOptions = ref<SysUserAllOutput[]>([])
let options = [] as any[]

onMounted(() => {
	let list = [] as SysUserAllOutput[];
	switch (props.scope) {
		case 'All':
			list = userList.value;
			break;
		case 'ShuXueKe':
			list = userList4ShuXueKe.value;
			break;
	}
	options = list.map((item, idx) => ({
		value: item.id,
		label: item.realName,
		disabled: !item.isEnabled,
	}))
	// 触发界面渲染
	filterMethod("")
})

// 根据中文拼音过滤
const filterMethod = (query: string) => {
	curOptions.value = filterArrayWithPinYin(options, query);
}
</script>
